Main Page Demo Page

The hoverFlow Plugin – Sub Menu Test Page

You can use the hoverFlow plugin to smooth out animated sub menus. However, you cannot use jQuery's shortcut animation methods like slideDown/slideUp or fadeIn/fadeOut then. To achieve the same effect, it's crucial to understand that jQuery's shortcut animation methods to nothing but calling the generic animate()-method with predefined animation properties. All you have to do is to call the hoverFlow-method with these properties.

Horizontal Sub Menu with slideDown/slideUp Effect

As of jQuery 1.3, slideDown() animates "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" to the special value "show", slideUp() animates the same properties to the special value "hide". Depending on your CSS, you might not need to animate all of these properties.

// hide sub menus
$('.horizontal_menu ul').hide();

// toggle sub menus on hover
$('.horizontal_menu > li')
  .hover(function(e) {
    $(this).children('ul').hoverFlow(e.type, {
      'height': 'show',
      'marginTop': 'show',
      'marginBottom': 'show',
      'paddingTop': 'show',
      'paddingBottom': 'show' 
    });
  }, function(e) {
    $(this).children('ul').hoverFlow(e.type, {
      'height': 'hide',
      'marginTop': 'hide',
      'marginBottom': 'hide',
      'paddingTop': 'hide',
      'paddingBottom': 'hide' 
    });
  });

Vertical Sub Menu with fadeIn/fadeOut Effect

As of jQuery 1.3, fadeIn() animates "opacity" to the special value "show", fadeOut() animates the same property to the special value "hide".

// hide sub menus
$('.vertical_menu ul').hide();

// toggle sub menus on hover
$('.vertical_menu > li')
  .hover(function(e) {
    $(this).children('ul').hoverFlow(e.type, {
      'opacity': 'show'
    });
  }, function(e) {
    $(this).children('ul').hoverFlow(e.type, {
      'opacity': 'hide'
    });
  });

A Solution without using hoverFlow

For animations that toggle the visibility of elements (like slideDown/slideUp or fadeIn/fadeOut), there's another good way to solve animation queue buildup. You can use the :hidden/:visible pseudo selectors to trigger the animations depending on their current visibility.

// hide sub menus
$('.without_hoverflow ul').hide();

// toggle sub menus on hover
$('.without_hoverflow > li')
  .hover(function() {
    $(this).children('ul:hidden').slideDown();
  }, function() {
    $(this).children('ul:visible').slideUp();
  });

However, there's a minor quirk. Mouseover a menu item and wait until the animation stops. Then, quickly mouseout and mouseover again. Your mouse pointer should be over the element, but you can't see the sub menu. You'll notice this problem especially when using long animation durations. Therefore, duration is set to 1 second in the examples below.

Using the :hidden/:visible Pseudo Selectors

Some random content

In Comparison: Using the hoverFlow Plugin

Some random content

© 2009 Ralf Stoltze, 2meter3.de